<template>
  <div>
    <Table :columns="columns" :data="data" :loading="loadTable" border style="width:800px; margin: 30px auto;text-align:center;"></Table>
  </div>
</template>
<script>
import md5 from 'js-md5';
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import {loginInvalid} from "../../libs/loginInvalidNotice.js";
export default {
  props: {

  },
  data() {
    return {
      curIndex: -1,
      loading: true,
      loadTable: true,
      newType: '',
      columns:[
        {
          title: '物品分类名称',
          key: 'name',
          width: 400,
          align: 'center'
        },
        {
          width: 400,
          align: 'center',
          render:(h, params) => {
            return h('Button', {
              props: {
                type: 'primary',
                icon: 'edit'
              },
              nativeOn: {
                click: () => {
                  this.$Modal.confirm({
                    render: (h) => {
                      return h('Input', {
                        props: {
                          value: this.newType,
                          autofocus: true,
                          placeholder: '请输入新物品分类'
                        },
                        on: {
                          input: (val) => {
                            this.newType = val;
                          }
                        }
                      })
                    },
                    loading: true,
                    title: '更改物品分类',
                    onOk: () => {
                      this.handleSaveNewType(params.row.id);
                    },
                    onCancel: () => {
                      this.$Modal.remove();
                    }
                  })
                }
              }
            }, '更改物品分类')
          },
          renderHeader: (h, params) => {
            return h('Button', {
              props: {
                type: 'success',
                icon: 'android-add'
              },
              nativeOn: {
                click: () => {
                  this.$Modal.confirm({
                    render: (h) => {
                      return h('Input', {
                        props: {
                          value: this.newType,
                          autofocus: true,
                          placeholder: '请输入新物品分类'
                        },
                        on: {
                          input: (val) => {
                            this.newType = val;
                          }
                        }
                      })
                    },
                    loading: true,
                    title: '增加物品分类',
                    onOk: () => {
                      this.handleAddType();
                    },
                    onCancel: () => {
                      this.$Modal.remove();
                    }
                  })
                }
              }
            }, '增加物品分类')
          }
        }
      ],
      data: [

      ]
    }
  },
  methods: {
    handleSaveNewType(id) {
      this.$axios.post(HOST + '/store/typeUpdate',
        querystring.stringify({
          id,
          name: this.newType
        }), {
          withCredentials: true
        }
      )
      .then((response) => {
        this.newType = '';
        this.$Modal.remove();
        if (response.data.status === 'success') {
          this.refreshStoreTypeList();
          this.$Notice.success({
            title: '更改成功',
            desc: `物品类型更新成功`
          });
        } else{
          this.$Notice.error({
            title: '更改失败',
            desc: `物品类型更新失败`
          });
        } 
      })
      .catch((err) => {
        if (err.data.status === 'invalid Token') {
          loginInvalid(this)();
        }
      })
    },
    handleAddType() {
      this.$axios.post(HOST + '/store/typeAdd',
        querystring.stringify({
          name: this.newType
        }), {
          withCredentials: true
        }
      )
      .then((response) => {
        this.newType = '';
        this.$Modal.remove();
        if (response.data.status === 'success') {
          this.refreshStoreTypeList();
          this.$Notice.success({
            title: '添加成功',
            desc: `物品类型添加成功`
          });
        } else{
          this.$Notice.error({
            title: '添加失败',
            desc: `物品类型添加失败`
          });
        } 
      })
      .catch((err) => {
        if (err.data.status === 'invalid Token') {
          loginInvalid(this)();
        }
      })
    },
    refreshStoreTypeList() {
      this.loadTable = true;
      this.$axios.get(HOST + '/store/storeType', {
          withCredentials: true
        })
        .then((response) => {
          let data = response.data;
          this.loadTable = false;
          if (data.length > 0) {
            this.data = data;
          }
        })
        .catch((err) => {
          if (err.data.status === 'invalid Token') {
            loginInvalid(this)();
          }
        })
    }
  },
  mounted() {
    this.refreshStoreTypeList();
  }
}
</script>
